import { View, Text, StyleSheet, DrawerLayoutAndroid, TextInput, TouchableOpacity, ScrollView, SafeAreaView } from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { RootStackParamList } from '../../navigation/types';
import { useState } from 'react';
import TypeStyleModal from './drawers';
import instance from '../../api/index';
// import EventSource from 'react-native-sse';
const AIWritingScreen = () => {
    const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
    const [inputText, setInputText] = useState('');
    const [textLength, setTextLength] = useState(0);
    const maxLength = 200;
    const [modalVisible, setModalVisible] = useState(false);
    const [selectedType, setSelectedType] = useState('自定义');
    const [selectedStyle, setSelectedStyle] = useState('自定义');
    const handleSubmit = ({ type, style }: { type: string, style: string }) => {
        setSelectedType(type);
        setSelectedStyle(style);
        setModalVisible(false);
    };
    function getStyleOptions() {
        instance.post('/hyk/deepseek-proxy', {
            headers: {
                messages: inputText
            }
        }).then(res => {
            alert(res)
        })
    }
    return (
        <SafeAreaView style={styles.safeArea}>
            <ScrollView style={styles.scrollView}>
                <View style={styles.header}>
                    <Text style={styles.backButton} onPress={() => navigation.goBack()}>{'<'}</Text>
                    <Text style={styles.title}>AI出题</Text>
                    <Text style={styles.history} onPress={() => { }}>历史</Text>
                </View>

                <View style={styles.inputContainer}>
                    <Text style={styles.exampleText} >请输入题目或主题*</Text>
                    <TextInput
                        style={styles.input}
                        placeholder="例如： 英语四级考试真题"
                        placeholderTextColor="#999"
                        multiline
                        value={inputText}
                        onChangeText={(text) => {
                            setInputText(text);
                            setTextLength(text.length);
                        }}
                        maxLength={maxLength}
                    />
                    <Text></Text>
                    <Text style={styles.counter}>{textLength}/{maxLength}</Text>
                </View>

                <View style={styles.optionContainer}>
                    <TouchableOpacity onPress={() => setModalVisible(true)}>
                        <View style={styles.optionRow} >
                            <Text style={styles.optionLabel}>试卷类型/风格</Text>
                            <View style={styles.optionValueContainer}>
                                <Text style={styles.optionValue}>{selectedType}/{selectedStyle}</Text>
                                <Text style={styles.arrowRight}>{'>'}</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                </View>

                <TouchableOpacity style={styles.generateButton} onPress={getStyleOptions}>
                    <Text style={styles.generateText}>开始生成</Text>
                </TouchableOpacity>
                <Text style={styles.disclaimer}>内容由AI生成，不可视为真实数据，不可作非法用途。</Text>
            </ScrollView>
            <View style={styles.inputContainer}>
                <Text>123</Text>
            </View>
            <TypeStyleModal
                visible={modalVisible}
                onClose={() => setModalVisible(false)}
                onSubmit={handleSubmit}
            />
        </SafeAreaView>
    );
};

export default AIWritingScreen;

const styles = StyleSheet.create({
    safeArea: {
        flex: 1,
        backgroundColor: '#f5f5f5',
        marginTop: 10,
    },
    scrollView: {
        flex: 1,
    },
    header: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 20,
        paddingVertical: 15,
    },
    backButton: {
        fontSize: 24,
    },
    title: {
        fontSize: 18,
        fontWeight: 'bold',
    },
    history: {
        fontSize: 16,
    },
    inputContainer: {
        margin: 15,
        padding: 15,
        backgroundColor: '#fff',
        borderRadius: 10,
    },
    input: {
        height: 100,
        fontSize: 16,
        textAlignVertical: 'top',
    },
    exampleText: {
        color: '#000',
        marginTop: 10,
        fontSize: 14,
        fontWeight: 'bold',
    },
    counter: {
        alignSelf: 'flex-end',
        color: '#999',
        marginTop: 10,
    },
    uploadButton: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        margin: 15,
        padding: 20,
        backgroundColor: '#fff',
        borderRadius: 10,
    },
    uploadText: {
        fontSize: 16,
    },
    arrowRight: {
        fontSize: 18,
        color: '#999',
    },
    optionContainer: {
        margin: 15,
        backgroundColor: '#fff',
        borderRadius: 10,
    },
    optionRow: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 20,
    },
    optionLabel: {
        fontSize: 16,
        fontWeight: 'bold',
    },
    optionValueContainer: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    optionValue: {
        fontSize: 16,
        color: '#333',
        marginRight: 10,
    },
    effectContainer: {
        margin: 15,
        padding: 15,
        backgroundColor: '#fff',
        borderRadius: 10,
    },
    effectTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        marginBottom: 15,
    },
    effectOptions: {
        flexDirection: 'row',
        marginBottom: 15,
    },
    effectOption: {
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 20,
        marginRight: 10,
    },
    effectOptionSelected: {
        backgroundColor: '#e6f7ff',
        paddingVertical: 10,
        paddingHorizontal: 20,
        borderRadius: 20,
        marginRight: 10,
    },
    effectOptionText: {
        color: '#333',
    },
    effectOptionTextSelected: {
        color: '#0080ff',
    },
    effectNote: {
        color: '#999',
        fontSize: 14,
    },
    generateButton: {
        margin: 15,
        padding: 15,
        backgroundColor: '#66ccff',
        borderRadius: 25,
        alignItems: 'center',
    },
    generateText: {
        color: '#fff',
        fontSize: 18,
    },
    disclaimer: {
        textAlign: 'center',
        color: '#999',
        marginVertical: 20,
        fontSize: 12,
    },
});
